<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title>树状菜单</title>

  <!--<link href="css/tree_back.css" rel="stylesheet">-->
  <link href="css/tree.min.css" rel="stylesheet">
</head>

<body>

<!--&lt;!&ndash; Add your site or application content here &ndash;&gt;
<p>Hello world! This is HTML5 Boilerplate.</p>
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

&lt;!&ndash; Google Analytics: change UA-XXXXX-Y to be your site's ID. &ndash;&gt;
<script>
  window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
  ga('create', 'UA-XXXXX-Y', 'auto'); ga('set', 'anonymizeIp', true); ga('set', 'transport', 'beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>-->
<div id="main" style="width: 500px;border: 1px solid black;margin: 20px 30px;display: inline-block">树状菜单</div>
<div style="display: inline-block;">
  <button id="btn1">显示/隐藏</button>

  <input type="text" id="nodeId"/>
  <button id="btn2">获取指定节点</button>
  <button id="btn3">获取所有选中的id</button>
  <button id="btn4">重新加载树</button><br>
  <input type="checkbox" id="enableDelete" value="true"/>开启删除
  <input type="checkbox" id="enableClear" value="true"/>开启清空
</div>
<script src="js/原型对象tree.js" type="text/javascript"></script>
<script type="text/javascript">
  /*var data = [{
    name: "父类",
    id:'1',
    childs: [{
      name: "子类",
      data:'你好',
      title:'child',
      childs: [{
        name: "子子类",
        unfold: true,
        data:'你好,子子类',
        id:2,
        childs: [{
          name: "子子子类",
          d:'你好,子子子类',
          hide:true
        }]
      }]
    }, {
      name: "子类1",
      unfold: false,
      data:'你好,子类1',
      id:2,
      childs: [{name: "子子类1"}]
    },{
      name:'子类2',
      type:'folder',

    }]
  }];*/
  /*async:{
      //url:'http://10.0.42.220:8090/test/treeTest',
      url:'test/树状图全国省份对照.json',
      method:'GET'

    }*/
  var f;
  var option = {async:{
      //url:'http://10.0.42.220:8090/test/treeTest',
      url:'test/树状图全国省份对照.json',
      method:'GET'
    }, elem: '#main',fold:function (){
      //console.log(arguments)
    },unfold:function (){
      //console.log(arguments)
    },format:function (format){
      format.id='tree_id';
      format.data='all';
      format.name='tree_name';
      format.title='tree_title';
      format.childs='list';
      f=format;
    },loadText:'正在加载数据中，请稍后...',loadCallBack:function (tree){
     /* var d= {tree_name: "tree9", tree_title: "9", tree_id: 9, unfold: false, type: true, source: "all", list: [
          {tree_name: "tree6", tree_title: "6", tree_id: 6, unfold: false, type: null, source: "all", list: []},
          {tree_name: "tree5", tree_title: "5", tree_id: 5, unfold: false, type: null, source: "all", list: []},
          {tree_name: "tree4", tree_title: "4", tree_id: 4, unfold: false, type: null, source: "all", list: []},
          {tree_name: "tree3", tree_title: "3", tree_id: 3, unfold: false, type: null, source: "all", list: []},
          {tree_name: "tree2", tree_title: "2", tree_id: 2, unfold: false, type: null, source: "all", list: []},
          {tree_name: "tree1", tree_title: "1", tree_id: 1, unfold: false, type: null, source: "all", list: []}
        ]};*/
     /* f.id='tree_id';
      f.data='all';
      f.name='tree_name';
      f.title='tree_title';
      f.childs='list';
        tree.addNodeByInterface(tree.getNodeById(1),{
          url:'test/树状图全国省份对照.json',
          method: 'get'
        },true);*/
        //tree.addNode(tree.getNodeById(180),d,false);
        //tree.addNode(tree.getNodeById(187),d,false);
    },//toolbar:true,
    toolClick:function (type,node){
      //alert(type+"\t"+id+"\t"+data);
      //console.log(ele)
      console.log(arguments)
    },//foldTools:[{'name':'删除',"title":'删除该节点',type:'delete'}],
    //tools:[{'name':'删除',"title":'删除该节点',type:'delete'}],
    folder_click:function (node){
      //console.log(node);
      //console.log(arguments)


    },
    //checkbox:true,
    gm_click:function (node){
      //node.check();
      /*node.addNodeByInterface({
        url:'http://10.0.42.220:8090/test/treeTest',
        //url:'test/树状图全国省份对照.json',
        method:'GET'
      });*/
      var isDelete=document.getElementById('enableDelete').checked;
      var isClear=document.getElementById('enableClear').checked;
      if(isDelete){
        node.remove();
        return;
      }
      if(isClear){
        node.clear();
        return;
      }
    },loadAll:false,
    template:function (data){
      //data.tree_name=data.tree_name.substr(1);
    },
    /*loadCallBack:function (tree){
      /!*tree.addEventListener(tree.getNodeById(0),'click',function (){
        //alert(1)
        console.log(111)
      });*!/
    }*/
    //,compelCustom:true,

  };
  if(window.ActiveXObject || "ActiveXObject" in window){
    option.toolbar=false;
  }
  var tree = new Tree(option);
  tree.init();
  if(document.addEventListener){
    var i=0;
    document.getElementById('btn1').addEventListener('click',function (){
      if(i==0){
        i=1;
        tree.nodeFold(tree.getNodeById(0),false);
      }else{
        i=0
        tree.nodeUnfold(tree.getNodeById(0),false);
      }
    });

    document.getElementById('btn2').addEventListener('click',function (){
      //console.log(tree.getChecked())
      console.log(tree.getNodeById(document.getElementById('nodeId').value));
    });

    document.getElementById('btn3').addEventListener('click',function (){
      var checkeds=tree.getChecked();
      console.log(checkeds)
      console.log(checkeds[0].parent().childs());
    });
    document.getElementById('btn4').addEventListener('click',function (){
      option.checkbox=true;
      tree.reload(option);
      setTimeout(function (){
        console.log(tree.getNodeById(0))
      },200);
    });

  }


  /*, icon_fold: {
    src: baseUrl + "img/" + ui + "/icon_fold.png", width: 16, height: 16
  }, icon_unfold: {
    src: baseUrl + "img/" + ui + "/icon_unfold.png", width: 16, height: 16
  }*/


</script>
</body>

</html>
